<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- (2) 想要多个元素过度就需要用transition-group进行包裹
             然后每个元素需要加上key让transition-group来区分
             每个元素的互斥显示可以通过v-show的互斥来实现---交叉过度
    -->
    <transition-group appear name="hello">
      <h1 v-show="isShow" key="1">你好啊~</h1>
      <h1 v-show="!isShow" key="2">JaceZhou~</h1>
    </transition-group>
</div>
</template>

<script>
export default {
  name: "myTest",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style scoped>
  h1 {
    background-color: orange;
  }
  /* (1) 以下就是用过度实现Test中的动画：
         过度需要更加细节的过程，分为进入的起点中间终点、离开的起点中间终点
  */
  .hello-enter,.hello-leave-to{
     transform: translateX(-100%);
  }
  
  .hello-enter-active,.hello-leave-active{
     transition: 1s linear;
  }

  .hello-enter-to,.hello-leave{
     transform: translateX(0);
  }

</style>
